<template>
<div class="wrapper">
    <swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide v-for="items of swiperList" :key="items.id">
       <img :src="items.imgUrl" class="swiper-img">
    </swiper-slide>
    
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    
  </swiper>
</div>
  
</template>
<script>
export default {
name:"HomeSwiper",
data(){
    return {
        swiperOption:{
            pagination:".swiper-pagination",
            loop:true
    },
   swiperList:[{
       id:"0001",
       imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/ed5f4115226306e48e6fad106a038afe.jpg_750x200_64df48d6.jpg"
   },{
     id:"0002",
       imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/3f47010a2312c32fff92fec3bcc99563.jpg_750x200_7ae774e5.jpg"  
   }]
}
}}

</script>

<style lang="scss" scoped>
.wrapper /deep/ .swiper-pagination-bullet-active {
    background: #fff ;
}
.wrapper{
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 31.25%;

.swiper-img{
        width: 100%;
    }

}

    
</style>

        


